<template>
    <view class="uni-shadow accessory">
        <!-- title -->
        <view :class="['u-flex',title.title?'u-m-b-30':'']">
            <view v-if="title.line" class="uni-line u-m-r-20"></view>
            <text v-if="title.title" class="u-font-32 font-bold">{{title.title}}</text>
        </view>

        <!-- tbody -->
        <view class="uni-table">
            <!-- 表头 -->
            <u-row class="uni-tr">
                <u-col span="3" class="u-font-28 font-bold" textAlign="center">序号</u-col>
                <u-col span="5" class="u-font-28 font-bold u-p-l-20" textAlign="left">附件名称</u-col>
                <u-col span="4" class="u-font-28 font-bold" textAlign="center">数量</u-col>
            </u-row>

            <!-- 内容 -->
            <u-row v-if="accessorys.length!=0" class="uni-tr"
                v-for="(item,index) in accessorys" :key="index" >
                <u-col span="3" class="u-font-26" textAlign="center">{{index+1}}</u-col>
                <u-col span="5" class="u-font-26 uni-higt-color u-p-l-20" textAlign="left">
                    <text @tap.stop="detail(item)">{{item.attachName}}</text>
                </u-col>
                <u-col span="4" class="u-font-26" textAlign="center">{{item.count?item.count:1}}</u-col>
            </u-row>

            <!-- 暂无附件信息 -->
            <u-row v-if="accessorys.length==0" class="uni-tr">
                <u-col span="12" class="u-font-26" textAlign="center">暂无附件信息</u-col>
            </u-row>

            <!-- 上传附件 -->
            <u-row v-if="upload" class="uni-tr">
                <u-col span="12" class="u-font-26 upload">
                    <u-upload 
                        width="200" height="60rpx"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="file"
                        multiple
                        :maxCount="10"
                        uploadIcon="plus"
                        uploadText="点击上传附件">
                    </u-upload>    
                </u-col>
            </u-row>
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    name: 'uni-accessory',
    props:{
        title:{
            type: Object,
            default(){
                return{
                    line: false,
                    title: ''
                }
            }
        },
        upload:{
            type: Boolean,
            default(){
                return false
            }
        },
        accessorys:{
            type: Array,
            default () {
                return [
                    { bid: 1, attachName:'附件名称', count: 3 },
                ]
            }
        }
    },

    data(){
        return {}
    },

    methods: {
        // 查看附件详情
        detail(item){
            if( item.attachUrl ){
                const arr = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx']
                if( arr.indexOf(item.attachSuffix) > -1 ){ // 文档
                    uni.downloadFile({
                        url: item.attachUrl,
                        success: function (res) {
                            var filePath = res.tempFilePath;
                            uni.openDocument({
                                filePath: filePath,
                                showMenu: true,
                                success: function (res) {
                                    console.log('打开文档成功')
                                }
                            })
                        }
                    })
                }else{
                    uni.setStorageSync('accessoryData', JSON.stringify([{type:item.attachSuffix,url:item.attachUrl}]) )
                    uni.navigateTo({ url: '/pages/common/accessory-detail' })
                }
                return false
            }
            if( item.attachList && item.attachList.length != 0 ){
                const data = []
                item.attachList.map((v,i)=>{
                    data.push({ type: v.attachSuffix, url: v.attachUrl })
                })
                uni.setStorageSync('accessoryData', JSON.stringify(data) )
                uni.navigateTo({ url: '/pages/common/accessory-detail' })
                return false
            }
            this.$refs.uToast.show({ message: '该附件无内容' })
        },

        // 新增图片
        afterRead(event){},
        // 删除图片
        deletePic(event){},
    }
}
</script>

<style scoped lang="scss">
    .accessory{
        background: $uni-text-color-inverse;
        .uni-table{
            border: 1rpx solid #eee;
            .uni-tr{
                min-height: 80rpx;
                &:nth-child(even){
                    background: #fff;
                    border-top: 1rpx solid #eee;
                    border-bottom: 1rpx solid #eee;
                }
                &:nth-child(odd){
                    background: #F6F7F8;
                }
                // 附件上传
                &:last-child{
                    border: none;
                }
                .upload{
                    justify-content: center !important;
                    align-items: center !important;
                    /deep/.u-upload__button{
                        margin: 0;
                        flex-direction: row;
                        .u-icon__icon{
                            font-size: 36rpx !important;
                            margin-right: 20rpx;
                        }
                        .u-upload__button__text{
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
</style>